<template>
	<view class="page-body">
		<u-navbar title="我的上级"></u-navbar>
		
		<view class="mt20">
			<u-cell-group>
				<u-cell-item :arrow="false" hover-class="none">
					<view slot="icon">
						<u-image width="100rpx" height="100rpx" :src="parent_headimgurl?parent_headimgurl:'/static/public/images/headimgurl.jpg'" shape="circle">
						</u-image>
					</view>
					<view slot="title" class="u-p-l-20">
						<view class="name">
							{{superiorInfo.parent_name}}
							<u-tag class="u-m-l-10" type="error" :text="superiorInfo.parent_level" size="mini" mode="plain" />
							<u-tag class="u-m-l-10" type="warning" text="推荐上级" size="mini" mode="plain" />
						</view>
						<view class="tel">
							手机号:{{superiorInfo.parent_mobile}}
						</view>
					</view>
					<view class="tel" slot="right-icon" @click="call(superiorInfo.parent_mobile)">
						<u-icon name="phone-fill" class="u-m-r-10"></u-icon>
						电话联系
					</view>
				</u-cell-item>
				
				<u-cell-item :arrow="false" hover-class="none">
					<view slot="icon">
						<u-image width="100rpx" height="100rpx" :src="supply_headimgurl?supply_headimgurl:'/static/public/images/headimgurl.jpg'" shape="circle">
						</u-image>
					</view>
					<view slot="title" class="u-p-l-20">
						<view class="name">
							{{superiorInfo.supply_name}}
							<u-tag class="u-m-l-10" type="error" :text="superiorInfo.supply_level" size="mini" mode="plain" />
							<u-tag class="u-m-l-10" type="warning" text="拿货上级" size="mini" mode="plain" />
						</view>
						<view class="tel">
							手机号:{{superiorInfo.supply_mobile}}
						</view>
					</view>
					<view class="tel" slot="right-icon" @click="call(superiorInfo.supply_mobile)">
						<u-icon name="phone-fill" class="u-m-r-10"></u-icon>
						电话联系
					</view>
				</u-cell-item>
				
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCurrentIndex:0,
				parent_headimgurl:'',
				supply_headimgurl:'',
				superiorInfo:{}
			}
		},
		onLoad() {
			//获取上级信息
			this.$u.post('channel/api.proxy_users/getSuperiorInfo').then(res => {
				this.superiorInfo = res.data;
				if (this.superiorInfo.parent_headimgurl){
					this.parent_headimgurl = this.config.baseUrl+this.superiorInfo.parent_headimgurl;
				}
				if (this.superiorInfo.supply_headimgurl){
					this.supply_headimgurl = this.config.baseUrl+this.superiorInfo.supply_headimgurl;
				}
				
			});
		},
		methods: {
			//swiper 切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
			},
			//顶部tab点击
			tabClick(index){
				this.tabCurrentIndex = index;
			},
			call(phoneNumber){
				
				uni.makePhoneCall({
				 	// 手机号
				    phoneNumber: phoneNumber+'', 
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				 });
			}
		}
	}
</script>

<style lang="scss">
	.page-body{
		height: calc(100% - 40px);
	}
	.swiper-box{
		height: 100%;
	}
	.top_box{
		margin-top: 50rpx;
		width: 100%;
		height: 500rpx;
		background-size: 100%;
		position: relative;
		background-color: #ffffff;
		.headimgurl {
			position: absolute;
			top:200rpx;
			left: 100rpx;
			width: 150rpx;
			height: 150rpx;
			overflow: hidden;
			margin-left: 20rpx;
			border-radius: 50%;
			border: 3rpx solid #cccccc;
		}
	}
	.info{
		background-color: #ffffff;
		padding: 80rpx;
		.name{
			display: block;
			font-size: 35rpx;
			font-weight: 700;
			line-height: 60rpx;
		}
		.level{
			font-size: 18rpx;
			color: $base-color;
			border-radius: 10rpx;
			padding: 1rpx 10rpx;
			border: 1rpx solid $base-color
		}
	}
	
	.name{
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}
	.tel{
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
	}
</style>
